<template>
  <div class="screen">
    <mt-header title="实习兼职" class="title" style="height:6%">
      <router-link to="/main/homePage" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="littleInterval"></div>
    <div id="list_title">
      <div id="list_left">职位列表</div>
      <div class="search">
        <form>
          <tr>
            <td><label class="glyphicon glyphicon-search searchLable"></label></td>
            <td><input type="text" class="form-control glyphicon glyphicon-search" id="serach" placeholder="搜索"></td>
          </tr>

        </form>
      </div>
    </div>
    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
      <div class="list_1_div" @click="showDetail">
        <div class="list_2_div"><span class="span_title">银行后勤客服文员实习生</span><span class="span_price">2500元/月</span></div>
        <div class="list_company_div"><span class="company_span">广州市图仕登商务服务有限公司</span></div>
        <div class="list_3_div"><span class="county">海珠</span><span class="time_slot">每周至少3天</span></div>
        <div class="littleInterval"></div>
      </div>
      <div class="list_1_div" @click="showDetail">
        <div class="list_2_div"><span class="span_title">底薪3000招聘高校社团公关</span><span class="span_price">3000元/月</span></div>
        <div class="list_company_div"><span class="company_span">广州市图仕登商务服务有限公司</span></div>
        <div class="list_3_div"><span class="county">越秀</span><span class="time_slot">每周至少2天</span></div>
        <div class="littleInterval"></div>
      </div>
      <div class="list_1_div" @click="showDetail">
        <div class="list_2_div"><span class="span_title">龙洞新媒体运营实习生</span><span class="span_price">80元/天</span></div>
        <div class="list_company_div"><span class="company_span">广州市图仕登商务服务有限公司</span></div>
        <div class="list_3_div"><span class="county">天河</span><span class="time_slot">每周至少3天</span></div>
        <div class="littleInterval"></div>
      </div>
      <div class="list_1_div" @click="showDetail">
        <div class="list_2_div"><span class="span_title">销售文员/助理</span><span class="span_price">100/天</span></div>
        <div class="list_company_div"><span class="company_span">广州市图仕登商务服务有限公司</span></div>
        <div class="list_3_div"><span class="county">天河</span><span class="time_slot">每周至少5天</span></div>
        <div class="littleInterval"></div>
      </div>
      <div class="list_1_div" v-for="item in list" @click="showDetail">
        <div class="list_2_div"><span class="span_title">招聘实习文员</span><span class="span_price">150元/天</span></div>
        <div class="list_company_div"><span class="company_span">广州市图仕登商务服务有限公司</span></div>
        <div class="list_3_div"><span class="county">天河</span><span class="time_slot">每周至少2天</span></div>
        <div class="littleInterval"></div>
      </div>
    </mt-loadmore>

  </div>
</template>

<script>
    export default {
        name: "Internship",
      data(){
        return {
          length:10,
          list:[1,2,3,4,5,6,7,8,9,0],
          allLoaded:false
        }
      },
      methods:{
        loadBottom() {
          // 加载更多数据
          for (let i = 1; i <= 10; i++) {
            this.list.push(i);
          }
          //this.allLoaded = true;// 若数据已全部获取完毕
          this.$refs.loadmore.onBottomLoaded();
        },
        showDetail(){
          this.$router.push({path:'/jobMessage'});
        }
      }
    }
</script>

<style scoped>
  @import "../../../assets/css/common.css";
  #list_title{
    height: 4rem;
    line-height: 4rem;
  }
  #list_left{
    font-size: larger;
    display: inline-block;
    float: left;
    margin-left: 1rem;
  }
  .list_2_div{
    font-size: large;
    font-weight: bold;
    text-align: left;
    line-height: 5rem;
  }
  .span_title{
    margin-left: 1rem;
  }
  .span_price{
    float: right;
    margin-right: 1rem;
    color: #ff862a;
  }
  .list_3_div{
    text-align: left;
    line-height: 3rem;
  }
  .county{
    margin-left: 1rem
  }
  .time_slot{
    margin-left: 1rem;
  }
  .mint-loadmore {
    height: 83vh;
  }
  .list_company_div{
    text-align: left;
    line-height: 3rem;
  }
  .company_span{
    margin-left: 1rem;
  }
</style>
